import React, { PureComponent } from 'react';
import { Route, withRouter } from 'react-router-dom'

@withRouter
class MyLink extends PureComponent {
  handlerClick = () => {
    this.props.history.push(this.props.to)
    if (this.props.click) {
      this.props.click()
    }
  }
  render() {
    let { to, children } = this.props
    return (
      <Route path={to} children={({ match }) => {
        if (match) {
          return <div onClick={this.handlerClick} style={{width:'100%',height:'100%',display:'flex',alignItems:'center',justifyContent:'center',textAlign:'center'}}>{ children }</div>
        } else {
          return <div onClick={this.handlerClick} style={{width:'100%',height:'100%',display:'flex',alignItems:'center',justifyContent:'center',textAlign:'center'}}>{ children }</div>
        }
      }} ></Route>
    );
  }
}

export default MyLink;